<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>首页</title>

  <link href="static/css/amazeui.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/admin.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/demo.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/hmstyle.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/skin.css" rel="stylesheet" type="text/css"/>
  <script src="static/js/jquery.min.js"></script>
  <script src="static/js/amazeui.min.js"></script>
</head>

<body>
<div class="hmtop">
  <div id="container3">
    <!--顶部导航条 -->
    <div class="am-container header">
      <ul class="message-l">
        <div class="topMessage">
          <div v-if="isLogin" class="menu-hd">
            {{ username }},欢迎您
          </div>
          <div v-else class="menu-hd">
            <a href="#" target="_top" class="h">亲，请登录</a>
            <a href="#" target="_top">免费注册</a>
          </div>
        </div>
      </ul>
      <ul class="message-r">
        <div class="topMessage home">
          <div class="menu-hd"><a href="index.html" target="_top" class="h"><i
            class="am-icon-home">商城首页</i></a></div>
        </div>
        <div class="topMessage my-shangcheng">
          <div class="menu-hd MyShangcheng"><a href="user-center.html" target="_top"><i
            class="am-icon-user am-icon-fw"></i>个人中心</a>
          </div>
        </div>
        <div class="topMessage mini-cart">
          <div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
            class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                  class="h">0</strong></a></div>
        </div>
        <div class="topMessage favorite">
          <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
          </div>
        </div>
      </ul>
    </div>
    <!--悬浮搜索框-->
    <div class="nav white">
      <div class="logoBig">
        <img src="static/images/logo.png" style="margin-left: 0px">
      </div>
      <div class="search-bar pr">
        <a name="index_none_header_sysc" href="#"></a>
        <form action="#">
          <input id="searchInput" v-model="keyword" name="index_none_header_sysc" type="text" placeholder="搜索"
                 autocomplete="off">
          <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="button" @click="toSearch">
        </form>
      </div>
    </div>
    <div class="clear"></div>
    <div class="banner">
      <!-- 轮播 -->
      <div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
        <ul class="am-slides">
          <li v-for="(img, index) in indexImgs" :class="'banner' + (index+1)">
            <a href="introduction.html">
              <img :src="'static/images/' + img.imgUrl"/>
            </a>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="shopNav">
      <div class="slideall">
        <div class="long-title"><span class="all-goods">全部分类</span></div>
        <div class="nav-cont">
          <ul>
            <li class="index"><a href="#">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">优惠</a></li>
          </ul>
          <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
          </div>
        </div>
        <!--侧边导航 -->
        <div id="nav" class="navfull">
          <div class="area clearfix">
            <div class="category-content" id="guide_2">
              <div class="category">
                <ul class="category-list" id="js_climit_li">
                  <li v-for="(c1, index) in categories" class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i>
                        <img :src="'static/images/' + c1.categoryIcon"></i>
                        <a class="ml-22" :title="c1.categoryName">{{ c1.categoryName }}</a>
                      </h3>
                      <em>&gt;</em>
                    </div>
                    <!--一级下的二级分类-->
                    <div class="menu-item menu-in top">
                      <div class="area-in">
                        <div class="area-bg">
                          <div class="menu-srot">
                            <div class="sort-side">
                              <!--每个dl代表一个二级分类-->
                              <dl v-for="(c2, index) in c1.categories" class="dl-sort">
                                <dt><span :title="c2.categoryName">{{ c2.categoryName }}</span></dt> <!--dt二级-->
                                <dd v-for="(c3, index) in c2.categories">
                                  <a :title="c3.categoryName" :href="'search.html?cid=' + c3.categoryId">
                                    <span>{{ c3.categoryName }}</span>
                                  </a>
                                </dd> <!--dd三级-->
                              </dl>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <b class="arrow"></b>
                  </li>
                </ul>
              </div>
            </div>

          </div>
        </div>
        <!--小导航 -->
        <div class="am-g am-g-fixed smallnav">
          <div class="am-u-sm-3">
            <a href="sort.html"><img src="static/images/navsmall.jpg"/>
              <div class="title">商品分类</div>
            </a>
          </div>
          <div class="am-u-sm-3">
            <a href="#"><img src="static/images/huismall.jpg"/>
              <div class="title">大聚惠</div>
            </a>
          </div>
          <div class="am-u-sm-3">
            <a href="#"><img src="static/images/mansmall.jpg"/>
              <div class="title">个人中心</div>
            </a>
          </div>
          <div class="am-u-sm-3">
            <a href="#"><img src="static/images/moneysmall.jpg"/>
              <div class="title">投资理财</div>
            </a>
          </div>
        </div>

        <!--走马灯 -->

        <div class="marqueen">
          <span class="marqueen-title">商城头条</span>
          <div class="demo">

            <ul>
              <li class="title-first"><a target="_blank" href="#">
                <img src="static/images/TJ2.jpg"></img>
                <span>[特惠]</span>商城爆品1分秒
              </a></li>
              <li class="title-first"><a target="_blank" href="#">
                <span>[公告]</span>商城与广州市签署战略合作协议
                <img src="static/images/TJ.jpg"></img>
                <p>XXXXXXXXXXXXXXXXXX</p>
              </a></li>

              <div class="mod-vip">
                <div class="m-baseinfo" v-if="isLogin">
                  <a href="person/index.html">
                    <img :src="'static/' + userimg">
                  </a>
                  <em>
                    Hi,<span class="s-name">{{ username }}</span>
                    <a href="#"><p>点击更多优惠活动</p></a>
                  </em>
                </div>
                <div class="member-logout" v-else>
                  <a class="am-btn-warning btn" href="login.html">登录</a>
                  <a class="am-btn-warning btn" href="register.html">注册</a>
                </div>
                <div class="member-login">
                  <a href="#"><strong>0</strong>待收货</a>
                  <a href="#"><strong>0</strong>待发货</a>
                  <a href="#"><strong>0</strong>待付款</a>
                  <a href="#"><strong>0</strong>待评价</a>
                </div>
                <div class="clear"></div>
              </div>

              <li><a target="_blank" href="search.html"><span>[特惠]</span>洋河年末大促，低至两件五折</a></li>
              <li><a target="_blank" href="search.html"><span>[公告]</span>华北、华中部分地区配送延迟</a></li>
              <li><a target="_blank" href="search.html"><span>[特惠]</span>家电狂欢千亿礼券 买1送1！</a></li>

            </ul>
            <div class="advTip"><img src="static/images/advTip.jpg"/></div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="shopMainbg">
      <div class="shopMain" id="shopmain">

        <!--今日推荐 -->

        <div class="am-g am-g-fixed recommendation">
          <div class="clock am-u-sm-3">
            <img src="static/images/2016.png"/>
            <p>新品<br>推荐</p>
          </div>
          <a v-for="(product, index) in recommendProducts" :href="'introduction.html?pid=' + product.productId">
            <div class="am-u-sm-4 am-u-lg-3 ">
              <div class="info ">
                <h3>{{ product.productName }}</h3>
                <h4>销量: {{ product.soldNum }}</h4>
              </div>
              <div class="recommendationMain one">
                <img v-if="product.imgs.length > 0" :src="'static/pimgs/' + product.imgs[0].url "/>
              </div>
            </div>
          </a>
        </div>
        <div class="clear "></div>
        <!--热门活动 -->

        <div class="am-container activity ">
          <div class="shopTitle ">
            <h4>活动</h4>
            <h3>每期活动 优惠享不停</h3>
            <span class="more ">
              <a href="# ">全部活动<i class="am-icon-angle-right" style="padding-left:10px ;"></i></a>
            </span>
          </div>
          <div class="am-g am-g-fixed ">
            <div class="am-u-sm-3 ">
              <div class="icon-sale one "></div>
              <h4>秒杀</h4>
              <div class="activityMain ">
                <img src="static/images/activity1.jpg"/>
              </div>
              <div class="info ">
                <h3>春季送礼优选</h3>
              </div>
            </div>
            <div class="am-u-sm-3 ">
              <div class="icon-sale two "></div>
              <h4>特惠</h4>
              <div class="activityMain ">
                <img src="static/images/activity2.jpg"/>
              </div>
              <div class="info ">
                <h3>夏季送礼优选</h3>
              </div>
            </div>
            <div class="am-u-sm-3 ">
              <div class="icon-sale three "></div>
              <h4>团购</h4>
              <div class="activityMain ">
                <img src="static/images/activity3.jpg"/>
              </div>
              <div class="info ">
                <h3>秋季送礼优选</h3>
              </div>
            </div>
            <div class="am-u-sm-3 last ">
              <div class="icon-sale "></div>
              <h4>超值</h4>
              <div class="activityMain ">
                <img src="static/images/activity.jpg"/>
              </div>
              <div class="info ">
                <h3>冬季送礼优选</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="clear "></div>
        <template v-for="(category, index) in recommendCategories">
          <div :id="'f' + (index + 1)" v-if="category.products.length > 0">
            <!--甜点-->
            <div class="am-container ">
              <div class="shopTitle ">
                <h4>{{ category.categoryName }}</h4>
                <h3>{{ category.categorySlogan }}</h3>
                <span class="more ">
                <a href="#">更多美味<i class="am-icon-angle-right" style="padding-left:10px ;"></i></a>
              </span>
              </div>
            </div>

            <div class="am-g am-g-fixed floodFour">
              <div class="am-u-sm-5 am-u-md-4 text-one list ">
                <div class="word">
                  <a class="outer" href="#" v-for="(product, indey) in category.products">
                  <span class="inner">
                    <b class="text">{{ product.productName }}</b>
                  </span>
                  </a>
                </div>
                <a href="# ">
                  <div class="outer-con ">
                    <div class="title ">
                      开抢啦！
                    </div>
                    <div class="sub-title ">
                      零食大礼包
                    </div>
                  </div>
                  <img :src="'static/images/' + category.categoryPic "/>
                </a>
                <div class="triangle-topright"></div>
              </div>
              <div class="am-u-sm-7 am-u-md-4 text-two sug" v-if="category.products.length > 0">
                <div class="outer-con ">
                  <div class="title ">
                    {{ category.products[0].productName }}
                  </div>
                  <div class="sub-title ">
                    {{ category.products[0].content }}
                  </div>
                  <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
                <a href="# "><img :src="'static/images/' + category.products[0].imgs[0].url"/></a>
              </div>
              <div class="am-u-sm-7 am-u-md-4 text-two" v-if="category.products.length > 1">
                <div class="outer-con ">
                  <div class="title ">
                    {{ category.products[1].productName }}
                  </div>
                  <div class="sub-title ">
                    {{ category.products[1].content }}
                  </div>
                  <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
                <a href="# "><img src="static/images/1.jpg"/></a>
              </div>
              <div class="am-u-sm-3 am-u-md-2 text-three big" v-if="category.products.length > 2">
                <div class="outer-con ">
                  <div class="title ">
                    {{ category.products[2].productName }}
                  </div>
                  <div class="sub-title ">
                    {{ category.products[2].content }}
                  </div>
                  <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
                <a href="# "><img src="static/images/5.jpg"/></a>
              </div>
              <div class="am-u-sm-3 am-u-md-2 text-three sug" v-if="category.products.length > 3">
                <div class="outer-con ">
                  <div class="title ">
                    {{ category.products[2].productName }}
                  </div>
                  <div class="sub-title ">
                    {{ category.products[2].content }}
                  </div>
                  <i class="am-icon-shopping-basket am-icon-md seprate"></i>
                </div>
                <a href="# "><img src="static/images/3.jpg"/></a>
              </div>
              <div class="am-u-sm-3 am-u-md-2 text-three " v-if="category.products.length > 4">
                <div class="outer-con ">
                  <div class="title ">
                    {{ category.products[3].productName }}
                  </div>
                  <div class="sub-title ">
                    {{ category.products[3].content }}
                  </div>
                  <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
                <a href="# "><img src="static/images/4.jpg"/></a>
              </div>
              <div class="am-u-sm-3 am-u-md-2 text-three last big " v-if="category.products.length > 5">
                <div class="outer-con ">
                  <div class="title ">
                    {{ category.products[3].productName }}
                  </div>
                  <div class="sub-title ">
                    {{ category.products[3].content }}
                  </div>
                  <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
                <a href="# "><img src="static/images/5.jpg"/></a>
              </div>

            </div>
            <div class="clear "></div>
          </div>

        </template>
        <div class="footer ">
          <div class="footer-hd ">
            <p>
              <a href="# ">锋迷商城</a>
              <b>|</b>
              <a href="# ">商城首页</a>
              <b>|</b>
              <a href="# ">支付宝</a>
              <b>|</b>
              <a href="# ">物流</a>
            </p>
          </div>
          <div class="footer-bd ">
            <p>
              <a href="# ">关于千锋</a>
              <a href="# ">合作伙伴</a>
              <a href="# ">联系我们</a>
              <a href="# ">网站地图</a>
              <em>© qfedu.com 版权所有</em>
            </p>
          </div>
        </div>

      </div>
      <!--引导 -->
      <div class="navCir">
        <li class="active">
          <a href="home.html">
            <i class="am-icon-home"></i>
            首页
          </a>
        </li>
        <li>
          <a href="sort.html">
            <i class="am-icon-list"></i>
            分类
          </a>
        </li>
        <li>
          <a href="shopcart.html">
            <i class="am-icon-shopping-basket"></i>
            购物车
          </a>
        </li>
        <li>
          <a href="person/index.html">
            <i class="am-icon-user"></i>
            我的
          </a>
        </li>
      </div>
    </div>
  </div>
</div>

<script>
  window.jQuery || document.write('<script src="static/js/jquery.min.js "><\/script>');
</script>
<script type="text/javascript " src="static/js/quick_links.js "></script>
<script type="text/javascript" src="static/js/cookie-utils.js"></script>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>

<script type="text/javascript">
  var baseUrl = "http://localhost:8080";

  var vm = new Vue({
    el: "#container3",
    data: {
      username: "",
      userimg: "",
      isLogin: false,
      indexImgs: [],
      categories: [],
      recommendProducts: [],
      recommendCategories: [],
      keyword: "",
      token: null
    },
    created: function () {
      // 从cookie中获取token、username、userImg
      var token = getCookieValue("token")
      this.token = token
      if (token != null && token != "") {
        this.isLogin = true
        this.username = getCookieValue("username")
        this.userimg = getCookieValue("userImg")
      }

      // 请求轮播图数据
      axios.get("static/hook/index/img.json").then(res => {
        var vo = res.data
        // 渲染轮播图
        this.indexImgs = vo.data
        // 初始化轮播图动画效果
        setTimeout(function () {
          $('.am-slider').flexslider(); //让轮播图"动起来"
        }, 10)
      })

      // 请求分类列表数据
      axios.get("static/hook/index/category-list.json").then(res => {
        var vo = res.data
        this.categories = vo.data
        // console.log(vo.data)
        // 让分类列表动起来
        setTimeout(function () {
          $("li").hover(function () {
            $(".category-content .category-list li.first .menu-in").css("display", "none");
            $(".category-content .category-list li.first").removeClass("hover");
            $(this).addClass("hover"); //鼠标放上去就动起来
            $(this).children("div.menu-in").css("display", "block")
          }, function () {
            $(this).removeClass("hover")
            $(this).children("div.menu-in").css("display", "none")
          });
        }, 100)
      })

      // 请求新品推荐数据
      axios.get("static/hook/index/list-recommends.json").then(res => {
        var vo = res.data
        this.recommendProducts = vo.data
      })

      // 请求分类商品数据
      axios.get("static/hook/index/category-recommends.json").then(res => {
        var vo = res.data
        this.recommendCategories = vo.data
        // console.log(vo.data)
      })
    },
    methods: {
      toSearch() {
        var url = "search.html?keyword=" + this.keyword
        // 进行编码，防止中文
        window.location.href = encodeURI(url)
      }
    }
  })
</script>
<!--轮播-->
<script type="text/javascript">
  (function () {
    $('.am-slider').flexslider(); //让轮播图"动起来"
  });
  $(document).ready(function () {
    // 让分类列表动起来
    $("li").hover(function () {
      $(".category-content .category-list li.first .menu-in").css("display", "none");
      $(".category-content .category-list li.first").removeClass("hover");
      $(this).addClass("hover"); //鼠标放上去就动起来
      $(this).children("div.menu-in").css("display", "block")
    }, function () {
      $(this).removeClass("hover")
      $(this).children("div.menu-in").css("display", "none")
    });
  })
</script>
<script type="text/javascript">
  if ($(window).width() < 640) {
    function autoScroll(obj) {
      $(obj).find("ul").animate({
        marginTop: "-39px"
      }, 500, function () {
        $(this).css({
          marginTop: "0px"
        }).find("li:first").appendTo(this);
      })
    }

    $(function () {
      setInterval('autoScroll(".demo")', 3000);
    })
  }
</script>
</body>

</html>
